<template>
	<view class="container">
		<view class="output">
			<view>
				{{output}}
			</view>
		</view>
		<view class="keys">
			<view class="row">
				<view class="oranges" @click="handleClick('C')">C</view>
				<view class="oranges" @click="handleClick('+/-')">+/-</view>
				<view class="oranges" @click="handleClick('%')">%</view>
				<view class="orange" @tap="handleClick('/')">÷</view>
			</view>
			<view class="row">
				<view @click="handleClick('7')">7</view>
				<view @click="handleClick('8')">8</view>
				<view @click="handleClick('9')">9</view>
				<view class="orange" @tap="handleClick('*')">x</view>
			</view>
			<view class="row">
				<view @click="handleClick('4')">4</view>
				<view @click="handleClick('5')">5</view>
				<view @click="handleClick('6')">6</view>
				<view class="orange" @tap="handleClick('-')">-</view>
			</view>
			<view class="row">
				<view @click="handleClick('1')">1</view>
				<view @click="handleClick('2')">2</view>
				<view @click="handleClick('3')">3</view>
				<view class="orange" @tap="handleClick('+')">+</view>
			</view>
			<view class="row-l">
				<view class="zero" @click="handleClick('0')">0</view>
				<view class="zero-l" @click="handleClick('.')">.</view>
				<view class="zero-l" @tap="calculate()">=</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				output: '',
			}
		},
		onLoad() {

		},
		methods: {
			handleClick(key) {
				if (key === 'C') {
					this.output = '0'
				} else if (key === '+/-') {
					this.output = parseFloat(this.output) * -1 + ''
				} else if (key === '%') {
					this.output = parseFloat(this.output) / 100 + ''
				} else if (key === '.') {
					if (this.output.indexOf('.') === -1) {
						this.output += '.'
					}
				} else if (key === '+' || key === '-' || key === '*' || key === '/') {
					this.num1 = parseFloat(this.output)
					this.operator = key
					this.output = '0'
					this.flag = true
				} else if (key === '=') {
					this.num2 = parseFloat(this.output)
					switch (this.operator) {
						case '+':
							this.output = this.num1 + this.num2 + ''
							break;
						case '-':
							this.output = this.num1 - this.num2 + ''
							break;
						case '*':
							this.output = this.num1 * this.num2 + ''
							break;
						case '/':
							this.output = this.num1 / this.num2 + ''
							break;
					}
				} else {
					if (this.flag) {
						this.flag = false
						this.output = ''
					}
					this.output += '' + key
				}
			}
		}
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		padding: 20px;
		background-color: #111111;
		color: #f0f0f0;
	}

	.output {
		background: #111111;
		height: 120px;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding-left: 10px;
		padding-right: 10px;
		margin-bottom: 10px;
		font-size: 36px;
	}

	.keys {
		display: flex;
		flex-direction: column;
	}

	.row {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.row view {
		flex: 1;
		margin: 10px;
		height: 80px;
		display: flex;
		/* border-radius: 40%; */
		justify-content: center;
		align-items: center;
		background-color: #7e7979;
		border-radius: 50%;
		font-size: 30px;
	}

	.orange {
		color: #fff;
		background-color: #f7d18a !important;
	}

	.oranges {
		color: #fff;
		background-color: #c1c1c1 !important;
	}

	.row-l {
		flex: 1;
		/* margin: 10px;
	height: 80px; */
		display: flex;
		justify-content: center;
		/* 	align-items: center;
	background-color: #7e7979;
	border-radius: 50%;
	font-size: 30px; */
	}

	.zero {
		flex: 2;
		margin: 10px;
		width: 160px;
		height: 80px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #7e7979;
		border-radius: 50px;
		font-size: 30px;
	}

	.zero-l {
		flex: 1;
		margin: 10px;
		height: 80px;
		display: flex;
		/* border-radius: 40%; */
		justify-content: center;
		align-items: center;
		background-color: #7e7979;
		border-radius: 50%;
		font-size: 30px;
	}
</style>
